<template>
  <div id="setstaff">
    <h1 class="titleTag">员工管理</h1>
    <el-form :inline="true" class="formone">
      <el-form-item>
        <el-input v-model="search" placeholder="登录账户/用户姓名" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="search = ''">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="addTo">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table ref="multipleTable" :data="tableData" height="520" style="width: 100%;">
        <el-table-column align="center" label="登录账号" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="用户姓名" prop="send_name"></el-table-column>
        <el-table-column align="center" label="用户电话" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="有效期限" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="用户状态" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="账户密码状态" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="创建人" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="send_phone"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="fb">
              <el-button type="text" size="small" @click="review">编辑</el-button>
              <el-button type="text" size="small">启用</el-button>
            </div>
            <div class="fb">
              <el-button @click="deleteSure(scope.$index, tableData)" type="text" size="small">删除</el-button>
              <el-button type="text" size="small" @click="review">停用</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 增加员工 -->
    <div class="addAddress">
      <el-dialog title="增加员工" :visible.sync="addDialog" center>
        <el-form label-position="left" :model="formData" :rules="rules" label-width="90px">

          <el-form-item label="用户姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" size="small"></el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="account">
            <el-input v-model="formData.account" placeholder="请输入账号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="formData.password" placeholder="请输入密码" size="small"></el-input>
          </el-form-item>
          <el-form-item label="用户电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入电话" size="small"></el-input>
          </el-form-item>
          <el-form-item label="有效期限" prop="time">
            <el-input v-model="formData.time" placeholder="请选择时间" size="small"></el-input>
          </el-form-item>
          <el-form-item label="用户角色" prop="role">
            <el-input v-model="formData.role" placeholder="请选择用户角色" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="submitBUTTON">
          <button @click="addDialog=false">确认</button> <button>取消</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "setstaff",
  data() {
    return {
      addDialog: false,
      search: "",
      tableData: [
        {
          send_name: "你好",
          send_phone: "18888888888",
          send_province: "山西省",
          send_city: "临汾市",
          send_area: "冀城县",
          send_address: "唐兴镇陵下村鼓楼西33号",
          receive_name: "世界",
          receive_phone: "16666666666",
          receive_province: "贵州省",
          receive_city: "贵阳市",
          receive_area: "云岩区",
          receive_address: "汇金星力城",
          id: "1"
        },
        {
          send_name: "你好0",
          send_phone: "18888888888",
          send_province: "山西省",
          send_city: "临汾市",
          send_area: "冀城县",
          send_address: "唐兴镇陵下村鼓楼西33号",
          receive_name: "世界",
          receive_phone: "16666666666",
          receive_province: "贵州省",
          receive_city: "贵阳市",
          receive_area: "云岩区",
          receive_address: "汇金星力城",
          id: "2"
        }
      ],
      formData: {
        //增加员工
        name: "",
        account: "",
        password: "",
        phone: "",
        time: "",
        role: ""
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间", trigger: "blur" }],
        role: [{ required: true, message: "请选择用户角色", trigger: "blur" }]
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    //新增
    addTo() {
      this.addDialog = true;
    },
    //编辑
    review() {
      this.addDialog = true;
    }
  }
};
</script>

<style lang="scss">
#setstaff .tableDetail .el-table__body-wrapper td {
  vertical-align: middle !important;
}
</style>
<style lang="scss" scoped>
#setstaff {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .tableDetail span {
    line-height: 35px;
  }
}
</style>
